/* eslint-disable */
<template>
   <div aria-live="polite" aria-atomic="true" class="position-relative">
      <div class="toast-container top-0 end-0 p-3">
        <div class="toast fade" :class="{ 'show': showToast && show }" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
            <strong class="me-auto">弹窗实例</strong>
            <small class="text-muted">刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" @click="close"></button>
          </div>
          <div class="toast-body">
            {{ content }}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'ShowMsg',
  data () {
    return {
      content: '322222222222222222',
      title: '22',
      showToast: true,
      show: true
    }
  },
  watch: {
    showToast: function (newValue, oldValue) {
      console.log(newValue + '----showToast------' + oldValue)
      if (newValue) {

      }
    }
  },
  created () {
  },
  methods: {
    close: function () {
      console.log('click')
      this.showToast = false
      this.content = '点击了'
    }
  }
}
</script>
